<script>
import { ref } from 'vue'
export default {
  setup() {
    const seconds = ref(60) // 倒计时60秒
    const isCountingDown = ref(false)

    const handleCaptchaClick = () => {
      if (!isCountingDown.value) {
        isCountingDown.value = true
        const intervalId = setInterval(() => {
          if (seconds.value > 0) {
            seconds.value--
          } else {
            clearInterval(intervalId)
            isCountingDown.value = false
            seconds.value = 60 // 重置秒数
          }
        }, 1000)
      }
    }
    return {
      seconds,
      isCountingDown,
      handleCaptchaClick,
    }
  },
}
</script>
<template>
  <div>
    <button :disabled="isCountingDown" @click="handleCaptchaClick">
      {{ isCountingDown ? `${seconds}秒后重新获取` : '获取验证码' }}
    </button>
  </div>
</template>
<style lang="less"></style>
